<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          v-model="queryParams.keyword"
          style="margin-bottom:10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
          @input="search"
        />
        <!-- 树形组件
        default-expand-all: 默认展开效果
        highlight-current：点击高亮效果
        expand-on-click-node：点击不收起
         -->
        <el-tree
          ref="deptTree"
          node-key="id"
          :data="depts"
          :props="{label: 'name'}"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @node-click="changeDepart"
        />
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button
            v-permission="'add-employee'"
            size="mini"
            type="primary"
            @click="addEmployee"
          >添加员工</el-button>
          <el-button v-permission="'excel-import'" size="mini" @click="importExcel">excel导入</el-button>
          <el-button v-permission="'excel-export'" size="mini" @click="exportExcel">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="userList">
          <el-table-column prop="staffPhoto" label="头像">
            <template v-slot="{row}">
              <el-avatar v-if="row.staffPhoto" size="medium" :src="row.staffPhoto" />
              <span v-else class="username"> {{ row.username.charAt() }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template v-slot="{row}">
              {{ row.formOfEmployment===1?'正式'
                :row.formOfEmployment===2?'非正式': '未知' }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column prop="timeOfEntry" label="入职时间" />
          <el-table-column label="操作">
            <template v-slot="{row, index}">
              <el-button type="text" @click="edit(row.id)">查看</el-button>
              <el-button type="text" @click="assignPerm(row.id)">角色</el-button>
              <el-popconfirm style="margin-left: 10px" title="确定删除该行数据吗？" @onConfirm="del(row.id)">
                <el-button slot="reference" type="text" @click="showPop(row, index)">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            :total="total"
            :page-size="queryParams.pagesize"
            layout="total, prev, pager, next"
            @current-change="currentChange"
          />
        </el-row>
      </div>
      <!-- 导入组件 -->
      <ImportExcel
        :show-excel-dialog.sync="excelDialog"
        @updateEvent="getEmployeeList"
      />
      <!-- 分配角色的弹窗 -->
      <el-dialog title="分配角色" :visible.sync="showDialog">
        <el-form>
          <el-form-item>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in roleList"
                :key="item.id"
                :label="item.id"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="center">
              <el-button type="primary" size="mini" @click="assignSubmit">确定</el-button>
              <el-button size="mini" @click="cancel">取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
/**
 * 需求1：左边部门列表的渲染
 * 实现步骤：
 * 1、引入获取部门列表接口函数，并在created中调用并保存数据
 * 2、利用el-tree组件事件渲染
 *
 * 需求2：员工列表的渲染
 * 1、封装接口函数
 * 2、在created中调用接口 并保存数据
 *  --- 注意：接口需要传参数，其他传递的部门id是顶级部门id
 * 3、根据数据渲染
 *
 * 需求3：员工列表分页功能的实现
 *
 * 需求4：根据输入的员工姓名搜索员工列表数据
 * 1、收集用户输入的名字
 * 2、给输入框绑定input事件
 * 3、在事件处理函数中调用接口实现搜索
 *
 * 需求5：实现导出员工列表数据
 * 分析：点击“导出”按钮，实现下载
 * 拆解：
 * 1、给“导出”按钮绑定点击事件
 * 2、封装接口函数
 * 3、点击事件处理函数中调用接口获取数据
 * 4、借助插件(file-saver)把数据转换表格并进行下载即可
 *
 * 需求6：实现批量导入员工的功能
 * 分析：点击导入按钮，显示弹窗，点击下载模块，然后在模板中添加员工信息
 * 点击“点击上传”按钮，实现上传。
 * 拆解步骤：
 * 1、给导入按钮绑定点击事件
 * 2、准备好弹窗组件
 * 3、点击的事件处理函数中控制弹窗显示
 * 4、下载模块
 *  4-1、给“下载导入模板”绑定点击事件
 *  4-2、封装下载导入模块的接口函数
 *  4-3、点击事件中调用接口进行下载
 * 5、给“点击上传”按钮绑定点击事件
 * 6、封装上传的接口函数
 * 7、在点击上传的事件处理函数中调用接口实现上传
 *
 * 需求：完成批量导入功能 -- 最后3步详细实现步骤
    1、给“点击上传”按钮绑定点击事件
    2、在点击的事件处理函数中模拟input的
    点击事件  --- click()
    3、给input框绑定change事件 --- 选择
    文件后触发的事件
    4、在事件处理函数中通过事件对象获取
    到选中的文件 --- e.target.files
    5、封装导入的接口函数
    6、在change事件处理函数中调用接口
            注意：需要把数据转为formData对象
    7、成功-关闭弹窗 - 更新列表
 *
 * 需求7、实现删除员工功能
 * 1、把删除按钮改为气泡组件
 * 2、给气泡组件中的确定按钮绑定点击事件
 * 3、封装删除的接口函数
 * 4、在确定的事件处理函数中调用接口实现删除
 *
 * 需求7：实现新增员工功能
 * 分析：点击“添加员工”按钮，跳转页面“详情页面”，然后在表单中输入员工信息，
 * 最后点击“保存更新”按钮，实现添加。
 * 拆解步骤：
 * 1、“添加员工”按钮绑定点击事件
 * 2、创建“详情页面”并且配置路由。
 * 3、点击的事件处理函数中实现跳转详情页面
 * 4、实现详情页面的布局和表单验证
 * 5、收集用户输入的员工信息 --- v-model
 *  --- 部门和员工头像需要单独处理
 * 6、给“保存更新”按钮绑定点击事件
 * 7、封装接口函数
 * 8、在点击事件中调用接口实现新增
 *
 * 需求8：分配角色
 * 分析：点击“角色”按钮，显示分配角色的弹窗，默认显示角色列表，
 * 然后用户勾选分配给改员工的角色，最后点击确定按钮实现角色的分配。
 * 拆解步骤：
 * 1、给“角色”按钮绑定点击事件
 * 2、准备好分配角色的弹窗
 * 3、在点击事件处理函数中控制弹窗显示
 * 4、在弹窗中实现角色列表的渲染
 * 5、收集用户勾选的角色
 * 6、给“确定”按钮绑定点击事件
 * 7、封装分配角色的接口函数
 * 8、在确定的事件处理函数中调用接口实现分配
 *
 * */
import { departmentList } from '@/api/department'
import { employeeList, exportEmployeeList, delEmployee, assignRoles, employeeDetails } from '@/api/employee'
import { transListToTreeData } from '@/utils'
import FileSaver from 'file-saver'
import ImportExcel from './components/import-excel'
import { enabledRoleList } from '@/api/role'
export default {
  name: 'Employee',
  components: { ImportExcel },
  data() {
    return {
      roleList: [], // 角色列表
      checkList: [], // 选中的角色列表
      showDialog: false,
      depts: [], // 部门列表
      queryParams: { // 查询列表参数
        page: 1,
        pagesize: 10,
        keyword: '',
        departmentId: null
      },
      userList: [], // 员工列表
      total: 0,
      excelDialog: false // 控制导入弹窗的显示隐藏
    }
  },
  async created() {
    const res = await departmentList()
    // 转树形结构
    this.depts = transListToTreeData(res, 0)
    // 默认请求顶级部门的数据
    this.queryParams.departmentId = this.depts[0].id
    // 设置顶级部门高亮效果 -- dom更新是异步
    this.$nextTick(() => {
      this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId)
    })

    this.getEmployeeList()
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      this.roleList = await enabledRoleList()
    },
    // 分配角色
    async assignPerm(id) {
      this.roleId = id // 保存员工id
      this.showDialog = true
      // 实现角色的回显 --
      // 调用接口获取员工详情得到角色信息进行回显
      const res = await employeeDetails(id)
      this.checkList = res.roleIds
    },
    // 确定 分配角色
    async assignSubmit() {
      await assignRoles({
        id: this.roleId,
        roleIds: this.checkList
      })
      this.$message.success('分配角色成功！')
      this.cancel()
    },
    // 关闭分配角色弹窗
    cancel() {
      this.showDialog = false
    },
    // 编辑
    edit(id) {
      this.$router.push('/employee/detail/' + id)
    },
    // 添加员工
    addEmployee() {
      // 跳转到详情页面
      this.$router.push('/employee/detail')
    },
    // 显示删除弹窗
    showPop(row, index) {
      // .el-popover  --- elementui组件失效的时候添加的功能
      document.querySelectorAll('.el-table tr')[index]
        .querySelector('.el-popover').style.display = 'block'
    },
    async del(id) {
      // console.log(id)
      await delEmployee(id)
      this.getEmployeeList()
      this.$message.success('删除成功！')
    },
    // 导入
    importExcel() {
      this.excelDialog = true
    },
    // 导出
    async exportExcel() {
      const res = await exportEmployeeList()
      console.log(res)
      // FileSaver.saveAs(数据流, 文件名)
      FileSaver.saveAs(res, '员工列表.xlsx')
    },
    // 搜索 --- 防抖优化
    search() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        // 等待用户输入完成后再发起请求进行搜索
        this.getEmployeeList()
      }, 500)
    },
    // 获取员工列表
    async getEmployeeList() {
      const res = await employeeList(this.queryParams)
      this.userList = res.rows
      this.total = res.total
    },
    // 选择部门
    changeDepart(data) {
      this.queryParams.departmentId = data.id
      this.queryParams.page = 1
      this.getEmployeeList()
    },
    // 分页功能
    currentChange(page) {
      this.queryParams.page = page
      this.getEmployeeList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

</style>
